<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .item{
            width: 500px;
            /* 设置为inline没用，因为行内元素不能设置宽度 */
            /* display: inline; */

            /* 通过浮动完成 */
            float: left; 
            margin-left: 30px;
        }
        .item p .keyword{
            font-size: 30px;
            color: white;
            background-color: orange;
        }

        .item img{
            width: 500px;
        }
    </style>
</head>
<body>
    <h1>星球介绍</h1>
    <div>

        <div class="item">
            <h2>木星</h2>
            <img src="../images/muxing.jpg" alt="">
            <p>
              <span class="keyword">木星（Jupiter）</span>是太阳系八大行星中体积最大、自转最快的行星，从内向外的第五颗行星。它的质量为太阳的千分之一，是太阳系中其它七大行星质量总和的2.5倍。由于木星与土星、天王星、海王星皆属气体行星，因此四者又合称类木行星（木星和土星合称气态巨行星）。木星是一个气态巨行星，占所有太阳系行星质量的70%，主要由氢组成，占其总质量的75%，其次为氦，占总质量的25%，岩核则含有其他较重的元素。人类所看到的通常是大气中云层的顶端，压强比1个大气压略高。
            </p>
        </div>

        <div class="item">
            <h2>地球</h2>
            <img src="../images/diqiu.jpg" alt="木星">
            <p>
                <span class="keyword">地球（Earth）</span>是太阳系八大行星之一，按离太阳由近及远的次序排为第三颗，也是太阳系中直径、质量和密度最大的类地行星，距离太阳1.5亿公里。地球自西向东自转，同时围绕太阳公转。现有40~46亿岁， [1]  它有一个天然卫星——月球，二者组成一个天体系统——地月系统。46亿年以前起源于原始太阳星云。
            </p>
        </div>

    </div>
    
</body>
</html>